<template>
  <div>
    <!-- logo -->
    <div class="menu-logo-bg mb-10">
      <div @click="logoRouter" class="menu-logo">
        <img class="logo" :src="logo" alt="" />
        <span class="logo-text weight-600">招标系统</span>
      </div>
    </div>
    <!-- 菜单 -->
    <el-menu ref="elMenu" class="el-menu-box">
      <menuItem
        v-for="item in menuList"
        :key="item.name"
        :menuInfo="item"
        class="menuItem"
      />
    </el-menu>
  </div>
</template>

<script>
import menuList from "@/router/menu";
import menuItem from "./item";
export default {
  components: {
    menuItem
  },
  mounted() {
    this.openMenu();
  },
  watch: {
    $route() {
      this.$nextTick(() => {
        this.openMenu();
      });
    }
  },
  data() {
    return {
      logo: require("../../../../public/logo.png"),
      menuList: menuList
    };
  },
  methods: {
    // logo跳转
    logoRouter() {
      if (this.$route.name === "material") return;
      this.$router.push({ name: "material" });
    },
    // 展开菜单
    openMenu() {
      this.getMenuName(this.menuList, {});
    },
    // 递归获取菜单对应的name并展开父级菜单
    getMenuName(menus, parentMenu) {
      let keepOn = true;
      menus.forEach(item => {
        const name = this.$route.meta.menuName || this.$route.name;
        if (item.name === name) {
          if (parentMenu.name) {
            this.$refs.elMenu.open(parentMenu.name);
          }
          keepOn = false;
        }
        if (item.children && item.children.length && keepOn) {
          this.getMenuName(item.children, item);
        }
      });
    }
  }
};
</script>

<style lang="scss">
.el-menu-box {
  border: none !important;
  user-select: none;
  .el-menu,
  .el-menu-item:focus {
    background-color: $frame-primary;
  }
  .el-menu-item:hover,
  .el-submenu__title:hover {
    background-color: $frame-deep;
  }
  .el-submenu__title,
  .el-menu-item,
  .el-menu-item.is-active,
  i {
    color: $frame-menu-font;
    font-size: $font-16;
  }
}
</style>
<style lang="scss" scoped>
.menu-logo-bg {
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  background-color: $frame-deep;
  color: $default-light;
  cursor: pointer;
  user-select: none;
  .menu-logo {
    height: 100%;
    float: left;
    @include hv-center;
  }
  .logo {
    @include box(32px);
    @include v-center;
    margin-right: 12px;
  }
}
.el-menu-box {
  background-color: $frame-primary;
}
.menuItem {
  color: $default-light;
}
</style>
